<template>
  <view class="page">
    <block v-if="step === 0">
      <view class="form-item">
        <view class="label">手机号</view>
        <view class="value">
          <v-input
            :autoFocus="true"
            v-model="phoneNumber"
            :max="11"
            class="v-input"
          >
            <template slot="ft">
              <button
                class="btn btn-primary btn-text"
                :class="{ disabled: time }"
                @click="onGetCode"
              >
                {{ !time ? "获取验证码" : time + "s后重新发送" }}
              </button>
            </template>
          </v-input>
        </view>
      </view>

      <view class="form-item">
        <view class="label">请输入短信验证码</view>
        <view class="value">
          <input-gird
            wrapClass="gird"
            :focus="false"
            v-model="dataForm.code"
            @finish="onFinishCode"
          ></input-gird>
        </view>
      </view>
    </block>
    <block v-else-if="step === 1">
      <view class="form-item">
        <view class="label">请输入新密码</view>
        <view class="value">
          <v-input
            v-model="dataForm.password"
            type="password"
            key="555"
            :max="20"
            @input="onInput"
            class="v-input"
          ></v-input>
        </view>
      </view>
      <view class="form-item">
        <view class="label">请再次输入新密码</view>
        <view class="value">
          <v-input
            v-model="dataForm.password_confirm"
            type="password"
            key="66"
            :max="20"
            @input="onInput"
            class="v-input"
          ></v-input>
        </view>
      </view>
    </block>
    <view class="form-item form-btn">
      <button
        class="btn btn-next"
        :class="[disabled ? 'btn-info' : 'btn-primary']"
        @click="onNext"
      >
        {{ countStep == step + 1 ? "确认修改" : "下一步" }}
      </button>
    </view>
    <Message ref="message"></Message>
  </view>
</template>

<script>
import detailModule from "@/common/mixins/detail-module";
import { mapState, mapMutations, mapActions } from "vuex";
import { imgBaseUrl, imgBaseUrlV1, imgBaseUrlV2 } from "@/common/config";
import inputGird from "@/components/public/input/gird2";
import vInput from "@/components/public/input/input";
import { getSMS } from "@/common/api/login";
import { checkCode, changePassword } from "@/common/api/user";
import { strategies } from "@/utils";

export default {
  mixins: [detailModule],
  components: {
    inputGird,
    vInput,
  },
  data() {
    return {
      imgBaseUrl,
      imgBaseUrlV1,
      imgBaseUrlV2,
      step: 0,
      time: 0,
      countStep: 2,
      disabled: true,
      phoneNumber: "",
      dataForm: {
        code: "",
        password: "",
        password_confirm: "",
      },
      mixinViewOptions: {
        // getURL: "/getDeviceInfo",
        getURL: "/getDeviceBasicInfo",
        isShowLoading: false,
        reachBottom: false,
        createdIsNeed: false,
        pullDown: false,
      },
    };
  },
  computed: {
    ...mapState("User", ["userInfo", "token", "permissions"]),
  },
  methods: {
    ...mapMutations("User", ["logout"]),
    ...mapActions("User", ["getUserInfo"]),
    onNext() {
      if (this.disabled) return;
      if (this.step == 0) {
        // 校验
        this.step++;
        this.disabled = true;
      } else {
        uni.showLoading({
          title: "修改中",
        });
        changePassword({
          mobile: this.phoneNumber,
          ...this.dataForm,
        })
          .then((res) => {
            uni.hideLoading();
            if (res.code !== this.$ERR_OK) {
              return this.message.error(res.message || "修改失败");
            }
            this.$store.commit("User/logout");
            this.showModal({
              title: "提示",
              content: "密码已修改成功,请重新登录!",
              showCancel: false,
              success: (r) => {
                // this.$Router.push("/pages/login-by-phone/login-by-phone");
                this.$Router.push("/pages/login/index");
              },
            });
          })
          .catch((err) => {
            uni.hideLoading();
            this.message.error("修改失败");
          });
      }
    },
    onInput() {
      if (
        this.dataForm.password.length >= 6 &&
        this.dataForm.password_confirm.length >= 6 &&
        this.dataForm.password === this.dataForm.password_confirm
      ) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
    onFinishCode() {
      uni.showLoading({
        title: "检验中",
      });
      checkCode({
        mobile: this.phoneNumber,
        code: this.dataForm.code,
      })
        .then((res) => {
          uni.hideLoading();
          if (res.code !== this.$ERR_OK) {
            return this.message.error(res.message || "检验失败,请重试");
          }

          this.disabled = false;
          this.onNext();
        })
        .catch((err) => {
          uni.hideLoading();
          this.message.error("检验失败,请重试");
        });
    },
    onGetCode() {
      let msg = strategies.isMoboleNumber(
        this.phoneNumber,
        "手机号格式不正确!"
      );
      if (!msg) {
        uni.showLoading({
          title: "发送中",
        });

        getSMS({
          mobile: this.phoneNumber,
        })
          .then((res) => {
            if (res.code === this.$ERR_OK) {
              this.time = 59;
              this.timer = setInterval(() => {
                this.time--;
                if (this.time <= 0) {
                  clearInterval(this.timer);
                  this.time = 0;
                }
              }, 1000);
            } else {
              this.message.error(res.message || "获取验证码失败,请重试");
            }
            uni.hideLoading();
          })
          .catch((err) => {
            uni.hideLoading();
          });
      } else {
        this.message.error(msg);
      }
    },
  },
  onLoad() {},
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/mixins';
@import '~@/common/stylus/variable';

.page {
  position: relative;
  min-height: calc(100vh - var(--window-top));
  padding-bottom: 50rpx;
   background: linear-gradient(180deg, #0d1523 0%, #102945 100%);
}

.form-item {
  padding: 12rpx 24rpx;

  &.form-btn {
    margin-top: 100rpx;
  }
  .v-input {
	background:#0d1523;
  }
  >.label {
    border: none;
    color: color-white;
    padding: 0;
    font-size: 32rpx;
    color: color-white;
    line-height: 1.6;
    margin-bottom: 16rpx;
  }

  .gird {
    padding: 0;
  }
}
</style>
